<template>
  <KbBase :scaleMode="scaleMode">
    <template #header>
      <KbHeader @toggleMode="toggleMode" />
    </template>
    <template #body>
      <div class="kb-body-left">
        <div class="kb-body-left-top kb-body-cell">
          <BoxItem
            :chartData="taxBurdenOption"
            title="本期风险排名前五的城市及税负情况"
          />
        </div>
        <div class="kb-body-left-bottom">
          <BoxItem :chartData="tbrOption" title="期各业态税负及风险情况" />
        </div>
      </div>
      <div class="kb-body-middle">
        <div class="kb-body-middle-top kb-body-cell">
          <div class="kb-body-middle-top-left">
            <BoxItem :chartData="scanOption" title="本期风险扫描情况">
              <template #chartDecoration>
                <img class="chart-bg" :src="scanImg" />
              </template>
            </BoxItem>
          </div>
          <div class="kb-body-middle-top-right">
            <BoxItem :chartData="followOption" title="本期风险跟进情况" />
          </div>
        </div>
        <div class="kb-body-middle-middle kb-body-cell">
          <BoxItem :chartData="distOption" title="本期税种风险分布情况" />
        </div>
        <div class="kb-body-middle-bottom">
          <BoxItem :is-custom="true" title="本期各税种税负情况">
            <template #body>
              <div class="container">
                <div
                  class="box"
                  v-for="(item, index) in taxBurdenOptions"
                  :key="index"
                  :style="{
                    float: 'left',
                    width: `${(1 / taxBurdenOptions.length) * 100}%`,
                    height: '100%',
                  }"
                >
                  <BoxItem
                    :has-border="false"
                    :has-header="false"
                    :chartData="item.option"
                  >
                    <template #chartDecoration>
                      <div class="value">{{ item.value }}</div>
                      <div class="name">{{ item.name }}</div>
                    </template>
                  </BoxItem>
                </div>
              </div>
            </template>
          </BoxItem>
        </div>
      </div>
      <div class="kb-body-right">
        <div class="kb-body-right-top kb-body-cell">
          <BoxItem
            :is-chart="false"
            title="本期风险排名前十的企业"
            :table-data="tableOption.tableData"
            :table-columns="tableOption.tableColumns"
          />
        </div>
        <div class="kb-body-right-bottom">
          <BoxItem :chartData="riskPointsOption" title="本期排名前十风险点" />
        </div>
      </div>
    </template>
  </KbBase>
</template>

<script>
import KbBase from "@/pages/dashboard/components/KbBase";
import KbHeader from "@/pages/dashboard/components/KbHeader";
import BoxItem from "@/pages/dashboard/components/BoxItem";
import scanImg from "@/assets/images/scan-bg.png";
import ToggleMode from "@/pages/dashboard/mixins/toggleMode";
export default {
  name: "yt-kb",
  components: {
    KbHeader,
    KbBase,
    BoxItem,
  },
  mixins: [ToggleMode],
  data() {
    return {
      scanImg,
      // 各区域税负及风险情况图设置项
      taxBurdenOption: {},
      // 近半年税负率与毛利率趋势图设置项
      tbrOption: {},
      // 风险扫描情况图表设置项
      scanOption: {},
      // 风险跟进情况图表设置项
      followOption: {},
      // 税种风险分布情况图表设置项
      distOption: {},
      // 各税种税负情况图表设置项
      taxBurdenOptions: [],
      // 本期风险排名前十的企业
      tableOption: {},
      // 本期排名前十风险点
      riskPointsOption: {},
    };
  },

  computed: {},

  created() {
    // left
    this.drawTaxBurdenChart();
    this.drawTbrChart();
    // middle
    this.drawScanChart();
    this.drawFollowChart();
    this.drawDistChart();
    this.drawTaxBurdenItemsChart();
    // right
    this.initTable();
    this.drawRiskPointsChart();
  },
  methods: {
    // left
    /**
     * 绘制各区域税负及风险情况图
     */
    drawTaxBurdenChart() {
      this.taxBurdenOption = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        grid: {
          left: "14%",
          right: "14%",
          bottom: "10%",
        },
        legend: {
          top: "2%",
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#e5e5e5",
              },
            },
            axisLabel: {
              color: "#393939",
            },
            data: ["华北", "华东", "华南", "华中", "华西", "总部"],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "风险数量",
            position: "left",
            alignTicks: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              formatter: "{value} 个",
            },
            color: "#000",
          },
          {
            type: "value",
            name: "综合税负",
            position: "right",
            alignTicks: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              formatter: "{value} %",
            },
            color: "#000",
          },
        ],
        series: [
          {
            name: "风险数量",
            type: "bar",
            barWidth: "50%",
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7],
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#50E7FF ", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#3985FA", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
          {
            name: "增值税税负",
            type: "line",
            yAxisIndex: 1,
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7],
            itemStyle: {
              color: "#fac860",
            },
          },
          {
            name: "综合税负",
            type: "line",
            yAxisIndex: 1,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2],
            itemStyle: {
              color: "#91CC75",
            },
          },
        ],
      };
    },
    /**
     * 绘制近半年税负率与毛利率趋势图
     */
    drawTbrChart() {
      this.tbrOption = {
        color: ["#FDC827", "#30D98A", "#326DF8"],
        tooltip: {
          trigger: "axis",
          order: "seriesDesc",
        },
        legend: {
          top: "5%",
          data: [
            {
              name: "增值税税负率",
              itemStyle: { color: "#326DF8" },
            },
            {
              name: "综合税负率",
              itemStyle: { color: "#30D98A" },
            },
            {
              name: "毛利率",
              itemStyle: { color: "#FDC827" },
            },
          ],
        },
        grid: {
          top: "15%",
          left: "8%",
          right: "8%",
          bottom: "6%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "2022年01月",
            "2022年02月",
            "2022年03月",
            "2022年04月",
            "2022年05月",
            "2022年06月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "毛利率",
            type: "line",
            stack: "Total",
            smooth: true,
            showSymbol: false,
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#FDC827", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#FFF", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            emphasis: {
              focus: "series",
            },
            data: [16, 24, 20, 16, 18, 34],
          },
          {
            name: "综合税负率",
            type: "line",
            stack: "Total",
            smooth: true,
            showSymbol: false,
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#30D98A", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#FFF", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            emphasis: {
              focus: "series",
            },
            data: [23, 19, 20, 22, 14, 13],
          },
          {
            name: "增值税税负率",
            type: "line",
            stack: "Total",
            smooth: true,
            showSymbol: false,
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#326DF8", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#FFF", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            emphasis: {
              focus: "series",
            },
            data: [11, 12, 10, 14, 9, 12],
          },
        ],
      };
    },
    // middle
    /**
     * 绘制风险扫描情况图
     */
    drawScanChart() {
      const scanCount = 110;
      const unScanCount = 234;
      const total = scanCount + unScanCount;
      const pointerCount = (scanCount / total) * 100;
      const radius = "80%";
      this.scanOption = {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            // 主体饼图
            name: "企业数",
            type: "pie",
            data: [
              {
                value: scanCount,
                name: "已扫描",
                itemStyle: {
                  color: "rgba(51,112,255,0.5)",
                },
                label: {
                  formatter: "已扫描\n{a} {c}",
                  color: "#3171fb",
                },
                labelLine: {
                  lineStyle: {
                    color: "#ffca3b",
                  },
                },
              },
              {
                value: unScanCount,
                name: "未扫描",
                itemStyle: {
                  color: "rgba(152,183,255,0.19)",
                },
                label: { show: false },
                labelLine: { show: false },
              },
            ],
            emphasis: {
              disabled: false,
              scale: true,
            },
            startAngle: 0,
            zlevel: 1,
            radius: [0, radius],
          },
          {
            // 指针
            name: "pointer",
            type: "gauge",
            data: [
              {
                value: pointerCount,
                name: "Percent",
              },
            ],
            radius: radius,
            startAngle: 0,
            endAngle: -360,
            zlevel: 2,
            title: { show: false },
            axisLabel: { show: false },
            splitLine: { show: false },
            axisTick: { show: false },
            axisLine: { show: false },
            detail: { show: false },
            // 单独设置该系列tooltip不显示
            tooltip: {
              formatter: " ",
              borderColor: "transparent",
              backgroundColor: "transparent",
              padding: 0,
            },
          },
          {
            // 内部圆环
            type: "pie",
            data: [{ value: 100, itemStyle: { color: "#3E7AFC" } }],
            emphasis: {
              disabled: true,
              scale: false,
            },
            label: { show: false },
            labelLine: { show: false },
            zlevel: 3,
            radius: ["3%", "4%"],
            // 单独设置该系列tooltip不显示
            tooltip: {
              formatter: " ",
              borderColor: "transparent",
              backgroundColor: "transparent",
              padding: 0,
            },
          },
          {
            // 内部圆心
            type: "pie",
            data: [{ value: 100, itemStyle: { color: "#FFF" } }],
            emphasis: {
              disabled: true,
              scale: false,
            },
            label: { show: false },
            labelLine: { show: false },
            zlevel: 3,
            radius: [0, "3%"],
            // 单独设置该系列tooltip不显示
            tooltip: {
              formatter: " ",
              borderColor: "transparent",
              backgroundColor: "transparent",
              padding: 0,
            },
          },
        ],
      };
    },
    /**
     * 绘制风险跟进情况图
     */
    drawFollowChart() {
      this.followOption = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "horizontal",
          bottom: "2%",
          width: "90%",
          itemWidth: 18,
          itemHeight: 6,
          textStyle: {
            fontSize: 10,
          },
        },
        series: [
          {
            name: "风险数量",
            type: "pie",
            radius: ["40%", "80%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "未下发" },
              { value: 735, name: "跟进中" },
              { value: 580, name: "已反馈" },
              { value: 484, name: "已关闭" },
            ],
            bottom: "5%",
          },
        ],
      };
    },
    /**
     * 绘制税种风险分布情况图
     */
    drawDistChart() {
      this.distOption = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          bottom: "2%",
          left: "2%",
          itemWidth: 18,
          itemHeight: 6,
        },
        series: [
          {
            name: "风险数量",
            type: "pie",
            radius: ["5%", "90%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
            },
            roseType: "area",
            data: [
              { value: 1048, name: "增值税" },
              { value: 735, name: "企业所得税" },
              { value: 580, name: "消费税" },
              { value: 484, name: "印花税" },
              { value: 300, name: "房产税" },
              { value: 726, name: "土地使用税" },
              { value: 182, name: "城市维护建设税" },
              { value: 972, name: "车辆购置税" },
            ],
            left: "20%",
          },
          {
            name: "风险数量",
            type: "pie",
            radius: ["5%", "10%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
            },
            zlevel: 1,
            emphasis: {
              scale: false,
            },
            // 单独设置该系列tooltip不显示
            tooltip: {
              formatter: " ",
              borderColor: "transparent",
              backgroundColor: "transparent",
              padding: 0,
            },
            data: [
              {
                value: 1048,
                name: "增值税",
                itemStyle: { color: "#FFF", opacity: 0.36 },
              },
            ],
            left: "20%",
          },
        ],
      };
    },
    /**
     * 绘制各税种税负情况图
     */
    drawTaxBurdenItemsChart() {
      const initOption = (name, value) => {
        return {
          name: name,
          value: `${value}%`,
          option: {
            tooltip: {
              formatter:
                '<span style="color: #000;">' +
                name +
                "：" +
                value +
                "%</span>",
            },
            angleAxis: {
              max: 100,
              clockwise: false, // 逆时针
              // 隐藏刻度线
              show: false,
              startAngle: 90,
            },
            radiusAxis: {
              type: "category",
              show: true,
              axisLabel: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
            },
            polar: [
              {
                center: ["50%", "40%"], //中心点位置
                radius: "110%", //图形大小
              },
            ],
            series: [
              {
                stack: "round",
                type: "bar",
                z: 10,
                data: [value],
                coordinateSystem: "polar",
                roundCap: true,
                barWidth: "8%", //大的占比环
                itemStyle: {
                  normal: {
                    opacity: 1,
                    color: {
                      type: "linear",
                      x: 1,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#3370FF", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#1CDACF", // 100% 处的颜色
                        },
                      ],
                      global: false, // 缺省为 false
                    },
                    shadowBlur: 5,
                    shadowColor: "#CCFFF9",
                  },
                },
              },
              {
                // 内层细圆环
                stack: "round",
                type: "bar",
                data: [100],
                coordinateSystem: "polar",
                roundCap: true,
                emphasis: {
                  disabled: true,
                },
                itemStyle: {
                  normal: {
                    opacity: 1,
                    color: "#EDEDED",
                  },
                },
              },
            ],
          },
        };
      };
      const itemsInfo = [
        {
          name: "增值税",
          value: 50.55,
        },
      ];
      this.taxBurdenOptions = [
        initOption(itemsInfo[0].name, itemsInfo[0].value),
        initOption(itemsInfo[0].name, itemsInfo[0].value),
        initOption(itemsInfo[0].name, itemsInfo[0].value),
        initOption(itemsInfo[0].name, itemsInfo[0].value),
        initOption(itemsInfo[0].name, itemsInfo[0].value),
        initOption(itemsInfo[0].name, itemsInfo[0].value),
      ];
    },
    // right
    /**
     * 初始化本期风险排名前十的企业表格
     */
    initTable() {
      this.tableOption = {
        tableData: [
          {
            id: 1,
            name: "北京XXXXXXXXXXXXXXXXXXXX有限责任公司",
            count: "87",
          },
          {
            id: 2,
            name: "北京XXXXXXXXXXXXXXXXXXXX有限责任公司",
            count: "78",
          },
          {
            id: 3,
            name: "北京XXXXXXXXXXXXXXXXXXXX有限责任公司",
            count: "76",
          },
          {
            id: 4,
            name: "北京XXXXXXXXXXXXXXXXXXXX有限责任公司",
            count: "75",
          },
          {
            id: 5,
            name: "北京XXXXXXXXXXXXXXXXXXXX有限责任公司",
            count: "68",
          },
          {
            id: 6,
            name: "北京XXXXXXXXXXXXXXXXXXXX有限责任公司",
            count: "67",
          },
          {
            id: 7,
            name: "北京XXXXXXXXXXXXXXXXXXXX有限责任公司",
            count: "56",
          },
          {
            id: 8,
            name: "北京XXXXXXXXXXXXXXXXXXXX有限责任公司",
            count: "54",
          },
          {
            id: 9,
            name: "北京XXXXXXXXXXXXXXXXXXXX有限责任公司",
            count: "53",
          },
          {
            id: 10,
            name: "北京XXXXXXXXXXXXXXXXXXXX有限责任公司",
            count: "46",
          },
        ],
        tableColumns: [
          {
            id: 1,
            prop: "name",
            label: "企业名称",
            width: undefined,
          },
          {
            id: 2,
            prop: "count",
            label: "风险数量",
            width: "100vw",
          },
        ],
      };
    },
    /**
     * 绘制本期排名前十风险点图
     */
    drawRiskPointsChart() {
      this.riskPointsOption = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        grid: {
          top: "5%",
          bottom: "8%",
          left: "94%",
          right: "42%",
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          inverse: true,
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#e5e5e5",
            },
          },
          axisLabel: {
            color: "#393939",
          },
          data: [
            "资源税同步增长系数",
            "印花税税负变动系数",
            "关联销售变动率与销售收入变动率配比",
            "关联出口销售比例",
            "所得税贡献变动率",
            "所得税税负率",
            "主营业务收入变动率与主营业务利润变动率配比",
            "营业外支出金额异常",
            "主营业务收入变动率",
            "成本费用利润率纵向比较",
          ],
        },
        series: [
          {
            name: "风险数量",
            data: [155, 110, 100, 96, 83, 77, 69, 61, 57, 51],
            type: "bar",
            barWidth: "50%",
            itemStyle: {
              normal: {
                opacity: 1,
                color: {
                  type: "linear",
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#C3D8FF", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#8887F9", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
                shadowBlur: 5,
                shadowColor: "#CCFFF9",
              },
            },
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.kb-body-cell {
  margin-bottom: 16px;
}
.kb-body-left {
  width: 530px;

  &-top {
    height: 367px;
  }

  &-bottom {
    height: 425px;
  }
}
.kb-body-middle {
  margin: 0 16px;
  width: 618px;

  &-top {
    display: flex;
    height: 217px;
    &-left {
      flex: 1;
      position: relative;
      margin-right: 16px;
    }
    &-right {
      flex: 1;
    }
  }

  &-middle {
    height: 404px;
  }

  &-bottom {
    height: 154px;
    .container {
      display: flex;
      width: 100%;
      height: 100%;
      .box {
        width: 100%;
        height: 100%;
      }
      .value {
        position: absolute;
        left: 50%;
        top: 40%;
        transform: translate(-50%, -50%);
        font-size: 0.8em;
        color: #3370ff;
      }
      .name {
        position: absolute;
        left: 50%;
        bottom: 8%;
        transform: translate(-50%);
        font-size: 0.8em;
      }
    }
  }
  .chart-bg {
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    transform: translateX(-50%) scale(0.9);
  }
}
.kb-body-right {
  width: 532px;

  &-top {
    height: 367px;
  }

  &-bottom {
    height: 425px;
  }
}
</style>